<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听器</title>
</head>
<body>
<div id="app">
    姓氏：<input type="text" v-model="firstName"/><br>
    名字：<input type="text" v-model="lastName"/><br>
    全名：<span v-text="fullName"></span>
</div>
<script src="../js/vue.js" ></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: '',
            fullName: ''
        },
        //监听器
        //key 被监听的属性的名称 方法的结构
        //当监听器生效时 value就是属性的数据
        watch: {
            firstName(value){
                this.fullName = value + this.lastName
            },
            lastName(value) {
                this.fullName = this.firstName + value
            }
        }
    })
</script>
</body>
</html>